<template>
  <el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="item in items" :key="item">
      <h1>{{ item }}</h1>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
    export default {
      data: function () {
        return {
          name: "carousel",
          items:["第一页","第二页","第三页","第四页"]
        }}
    }
</script>

<style scoped>
  .el-carousel__item h1 {
    color: #fff;
    font-size: 80px;
    text-align: center;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: rgba(0, 43, 87, 0.76);
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #2c3e50;
  }
</style>
